<template>
  <view class="detail">
    <view class="box">
      <view class="title">包裹信息</view>
      <view class="line flex">
		  <view style="flex: 1;">快递单号：{{mainData.track}}</view>
		<image @click="$utils.copyMessage(mainData.track)" src="@/static/icon/copy-icon.png" class="copy-btn" mode="aspectFill"></image>
	  </view>
      <view class="line">送达仓库：{{mainData.warehouse}}</view>
	  <view v-if="mainData.status==2 ||mainData.status==3">是否异常：{{mainData.is_new==1?'是':'否'}}</view>
    </view>
    <view class="box">
      <view class="title">物品信息</view>
	  <view style="margin-bottom: 40rpx;" v-for="item in mainData.info" :key="item.id">
	  	<view class="line flex">
	  	  <view class="rightmargin">类型：{{mainData.type_name}}</view>
	  	  <view class="leftmargin">名称：{{item.name}}</view>
	  	</view>
	  	<view class="line flex">
	  	  <view class="rightmargin">数量：{{item.num}}</view>
		   <view class="leftmargin">单价：{{item.price || '无'}}</view>
	  	  <!-- <view class="leftmargin">规格：{{item.spe}}</view> -->
	  	</view>
	  	<!-- <view class="flex">
	  	  <view class="rightmargin">品牌：{{item.brand}}</view>
	  	  <view class="leftmargin">单价：{{item.price}}</view>
	  	</view> -->
	  </view>
     
    </view>
    <view class="box">
      <view class="title">其他信息</view>
      <view class="line">{{mainData.status==1||mainData.status==2?'预报':'创建'}}时间：{{mainData.add_time}}</view>
      <view class="line" v-if="mainData.status!=1">入库时间：{{mainData.warehousing_time}}</view>
      <view class="line" v-if="mainData.status!=1 && mainData.status!=2 && mainData.status!=4">下单时间： {{mainData.order_time}}</view>
      <view class="line">货架号： {{mainData.shelf_number || ''}}</view>
      <view class="line flex" v-if="mainData.order_no">运单号： {{mainData.order_no}}
		<image src="@/static/icon/copy-icon.png" @click="$utils.copyMessage(mainData.order_no)" class="copy-btn" mode="aspectFill"></image>
	  </view>
      <view class="line">备注： {{mainData.remakes}}</view>
      <view class="line">增值服务：</view>
      <view class="serve" v-for="item in mainData.add_service">{{item}}</view>
      <view class="line">照片：</view>
      <view class="imglist flex">
        <view
          class="img"
          v-for="(item, index) in mainData.images"
          :key="index"
          @click="preImage(mainData.images,index)"
        >
          <u-image
            :src="item"
            width="96rpx"	
            height="96rpx"
          ></u-image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
		mainData:''
	};
  },
  onLoad(potions) {
	  if(potions.id){
		  this.$api.post({
		      url: "/ebapi/public_api/reservation_details",
		      data: {id:potions.id},
		      success: (res) => {
				  this.mainData = res;
				  this.mainData.info = JSON.parse(this.mainData.info)
		  		console.log(res,"包裹详情")
		  	},
		   })
	  }
	console.log(potions,"potions")
  },
  methods: {
    preImage(imgArr,index) {
      console.log("previewImage");
      this.$uniApi.previewImage(imgArr,index);
    },
  },
};
</script>

<style lang="scss">
.detail {
  padding-bottom: 70rpx;

  .box {
    margin-top: 24rpx;
    padding: 36rpx 36rpx 45rpx;
    box-shadow: 0rpx 2rpx 10rpx 1rpx rgba(0, 0, 0, 0.08);
    border-radius: 16rpx;

    .title {
      font-weight: bold;
      font-size: $uni-text-size-title;
      margin-bottom: 35rpx;
    }

    .line {
      margin-bottom: 15rpx;
	  font-size: 28rpx;
    }

    .rightmargin {
      flex: 1;
    }

    .leftmargin {
      flex: 1;
    }

    .serve {
      color: $uni-text-color-grey;
	  font-weight: bold;
	  font-size: 28rpx;
      margin-bottom: 25rpx;
    }

    .imglist {
      .img {
        width: 96rpx;
        height: 96rpx;
        margin-right: 24rpx;
      }
    }
  }
}
</style>
